<template>
  <div class="mouse-position-box-wrapper">
    <div class="mouse-position-box" :class="{ showing }">
      <div class="mouse-position">{{ nowPostion.wgs84 }}</div>
      <a-popover placement="topRight" :visible="cameraPopoverShow" trigger="click" @visibleChange="getCameraProps">
        <template #title>
          <div class="camera-popover-title">
            <span style="color: #fff;">相机参数</span>
            <a @click="cameraPopoverShow = false"><CloseCircleFilled /></a>
          </div>
        </template>
        <template #content>
          <div class="camera-popover-content">
            <p>位置：{{ cameraProps.position }}</p>
            <p>偏航：{{ cameraProps.heading }}</p>
            <p>俯仰：{{ cameraProps.pitch }}</p>
            <p>翻滚：{{ cameraProps.roll }}</p>
          </div>
        </template>
        <a class="btn-camera" title="相机参数" @click="cameraPopoverShow = !cameraPopoverShow"><VideoCameraFilled /></a>
      </a-popover>
    </div>
    <a class="btn-mouse-position" :class="{ showing }" @click="showing = !showing" :title="showing ? '隐藏' : '显示'"><EnvironmentOutlined /></a>
  </div>
</template>

<script lang="ts">
import MousePosition from './mousePosition';
import { AimOutlined, VideoCameraOutlined, VideoCameraFilled, EnvironmentOutlined, BorderInnerOutlined, InstagramOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import { Cartographic, Math } from '@cesiumjs';

//将坐标转化为84坐标
const get84Cood = positon => {
  const { latitude, longitude, height } = Cartographic.fromCartesian(positon);
  const lat = Math.toDegrees(latitude).toFixed(5);
  const lon = Math.toDegrees(longitude).toFixed(5);
  return {
    lon,
    lat,
    height: height.toFixed(0)
  };
};

export default defineComponent({
  name: 'mouse-position-box',
  components: { AimOutlined, MousePosition, VideoCameraOutlined, VideoCameraFilled, EnvironmentOutlined, BorderInnerOutlined, InstagramOutlined, CloseCircleFilled },
  setup(props, context) {
    let showing = ref(props.show);
    return { showing, mousePosition: null };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    viewerSource: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      cameraPopoverShow: false,
      cameraPropsCallback: null,
      nowPostion: {},
      cameraProps: {}
    };
  },
  computed: {
    viewer() {
      return this.viewerSource && this.viewerSource.viewer;
    }
  },
  watch: {
    viewer: {
      handler(newVal, oldVal) {
        newVal && this.initMousePosition();
        newVal && this.initCameraProps();
      },
      immediate: true
    }
  },
  mounted() {
    console.log('mouse-position');
  },
  beforeUnmount() {
    let { viewer, mousePosition,cameraPropsCallback } = this;
    cameraPropsCallback && viewer.camera.changed.removeEventListener(cameraPropsCallback, this);
    this.cameraPropsCallback = null;
    mousePosition && mousePosition.destroy();
    this.mousePosition = null;
  },
  methods: {
    initMousePosition() {
      let vm = this;
      vm.mousePosition = new MousePosition(vm.viewer, pos => {
        vm.nowPostion = pos;
      });
    },
    initCameraProps() {
      let vm = this;
      const { viewer, getCameraProps } = this;
      if (viewer) {
        vm.cameraPropsCallback = viewer.camera.changed.addEventListener(getCameraProps, vm);
      }
    },
    //获取相机参数
    getCameraProps() {
      // console.log('getCameraProps');
      const { position, heading, pitch, roll } = this.viewer.camera;
      const { lon, lat, height } = get84Cood(position);
      this.cameraProps = {
        position: [lon, lat, height]
          .toString()
          .replace(/\"/g, '')
          .replace(/,/g, ', '),
        heading: heading.toFixed(5),
        pitch: pitch.toFixed(5),
        roll: roll.toFixed(5)
      };
    }
  }
});
</script>

<style lang="less">
.mouse-position-box-wrapper {
  position: absolute;
  right: 0;
  bottom: 8px;
  padding: 0;

  display: flex;
  align-items: stretch;

  .btn-mouse-position {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8em;
    width: 1.8em;
    height: 1.6em;
    margin: 0;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    opacity: 0.5;
    transition: all 500ms;

    &.showing {
      opacity: 0.9;
      background-color: rgba(0, 0, 200, 0.9);
    }

    &:active {
      opacity: 0.6;
      background-color: rgba(0, 0, 200, 0.9);
    }
  }

  .mouse-position-box {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 5px;
    color: white;
    font-size: 14px;

    background-color: rgba(40, 48, 60, 0.5);

    transition: all 500ms;

    &.showing {
      display: flex;
    }

    &:hover {
      background-color: rgba(0, 0, 200, 0.7);
    }

    .mouse-position {
      display: flex;
      flex-direction: row;
      align-items: center;
      white-space: nowrap;
      width: auto;
    }

    .btn-camera {
      font-size: 18px;
      padding: 0 5px 0 6px;
      margin: 3px 5px;
      border: 1px solid rgba(0, 0, 0, 0);
      color: rgba(0, 100, 255, 0.95);
      border-radius: 5px;
      transition: all 500ms;
      &:hover {
        color: rgba(0, 200, 255, 0.95);
        background-color: rgba(0, 100, 255, 0.3);
        border: 1px solid rgba(0, 100, 255, 0);
      }
      &:active {
        opacity: 0.6;
      }
    }
  }

  &:hover {
    .mouse-position-box {
      display: flex;
      background-color: rgba(0, 0, 0, 0.8);
    }
  }
}

.camera-popover-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  a {
    color: #ff5;
  }
}

.camera-popover-content {
  display: flex;
  flex-direction: column;
  line-height: 1.2em;

  p {
    margin-bottom: 8px;
  }
}
</style>
